// 活动页面
@import "./reset";
@import "./nav.scss";
@import "./footer.scss";

.banner {
    text-align: center;
    width: 100%;

    img {
        margin: 0 auto;
        width: 1520px;
    }
}

// 投票活动
.activity {
    margin: 60px auto;
    width: 846px;

    h3 {
        font-weight: 600;
    }

    .wrap {
        margin: 0 auto;
        width: 680px;

        >p:nth-of-type(1) {
            padding-left: 18px;
            margin-bottom: 44px;
            height: 28px;
            line-height: 28px;
            font-size: 22px;
            font-style: italic;
            color: #525252;
            opacity: 0.5;
            background-color: #EFEFEF;
        }

        >p:nth-of-type(2) {
            margin-bottom: 32px;
            width: 659px;
            height: 55px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 16px;
            letter-spacing: 0px;
            color: #525252;
            opacity: 0.9;
        }

        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 680px;

            li {
                position: relative;
                text-align: center;
                margin-top: 24px;
                width: 320px;
                height: 280px;

                &:hover {
                    .mask {
                        visibility: visible;
                    }
                }

                img {
                    width: 100%;
                    box-shadow: -1px 5px 6px 0px #444;
                }

                button {
                    margin-top: 22px;
                    width: 102px;
                    height: 42px;
                    color: white;
                    background-image: linear-gradient(0deg,
                            #00497d 0%,
                            #3e8fc9 100%),
                        linear-gradient(#000000,
                            #000000);

                    box-shadow: 1px 1px 0px 0px rgba(255, 255, 255, 0.82);
                    border-radius: 5px;
                }

                .mask {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: absolute;
                    top: 0px;
                    width: 100%;
                    height: 209px;
                    background-color: #002c4b;
                    opacity: 0.67;
                    visibility: hidden;

                    p:first-of-type {
                        color: #fff;
                    }

                    p:last-of-type {
                        margin-top: 12px;
                        font-size: 12px;
                        letter-spacing: 1px;
                        color: #ffffff;
                    }
                }

            }
        }
    }
}

// 底部插图
.footer_pic {
    margin: 0 auto;
    margin-top: -70px;
    width: 1520px;

    img {
        width: 1520px;

    }
}